<template>
  <div style="padding: 20px;">
    <el-card shadow="hover">
      <template #header>
        <div style="font-weight: bold; font-size: 16px;">添加新用户</div>
      </template>

      <el-form :model="form" label-width="120px" :rules="rules" ref="userForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="form.age" type="number" placeholder="请输入年龄" />
        </el-form-item>

        <el-form-item label="头衔" prop="title">
          <el-select v-model="form.title" placeholder="请选择头衔">
            <el-option label="正式会员" value="正式会员" />
            <el-option label="高级会员" value="高级会员" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存用户</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

const form = ref({
  username: '',
  account: '',
  password: '',
  gender: '',
  age: null,
  title: ''
});

const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 5, message: '账号至少5个字符', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, message: '密码至少8个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '年龄必须为数字', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请选择头衔', trigger: 'change' }
  ]
});

const userForm = ref(null);

const submitForm = async () => {
  try {
    await userForm.value.validate();
    const res = await request.post('/v1/staff/user/add', form.value);

    if (res.state === 2001) {
      ElMessage.success('用户添加成功');
      resetForm();
    } else {
      ElMessage.error(res.message || '添加失败');
    }
  } catch (error) {
    if (error.name !== 'ValidateError') {
      ElMessage.error('请求出错');
      console.error(error);
    }
  }
};

const resetForm = () => {
  userForm.value.resetFields();
};
</script>
